<template>
  <view class="container" v-if="goodsInfo">
    <view class="contentBg">
      <u-swiper
        :list="goodsInfo.sliderPicUrls"
        height="720"
        border-radius="0"
        mode="number"
        indicator-pos="bottomRight"
      ></u-swiper>
      <u-navbar :is-back="false" :border-bottom="false" :background="{ background: 'transparent' }">
        <view class="slot-wrap dis-flex" style="width: calc(100% - 20rpx)">
          <view class="cus-back" @click="backView()">
            <u-icon
              name="/static/goods-detail/back.png"
              size="28rpx"
              color="#fff"
              class="uicon"
            ></u-icon>
          </view>
          <!-- <view class="cus-back cus-gwc" @click="toCarPage()">
          <u-icon
            name="/static/goods-detail/gwc.png"
            size="28rpx"
            color="#fff"
            class="uicon"
          ></u-icon>
          </view> -->
          <view class="cus-back cus-share">
            <button
              open-type="share"
              style="
                margin: 0;
                padding: 0;
                border: none;
                background-color: transparent;
                overflow: auto;
                line-height: normal;
              "
            >
              <u-icon
                name="/static/goods-detail/sxyh.png"
                size="28rpx"
                color="#fff"
                class="uicon"
              ></u-icon>
            </button>
          </view>
        </view>
      </u-navbar>
    </view>

    <view class="content" :style="{ 'margin-top': offsetTop }">
      <view class="goodsView">
        <view class="goodsTitle dis-flex flex-x-bottom">
          <text>{{ goodsInfo.name }}</text>
          <view class="coupon" v-if="goodsInfo.hasCoupon">优惠券</view>
        </view>
        <view class="goodsSales">已售{{ goodsInfo.salesCount }}</view>
        <view class="point-rule dis-flex">
          <view class="price">
            <text class="t">原价:¥</text>
            <text class="n">{{ (goodsInfo.price * 0.01).toFixed(2) }}</text>
          </view>
          <view class="vip-price">
            <text class="t">会员价:¥</text>
            <text class="n">{{ (goodsInfo.vipPrice * 0.01).toFixed(2) }}</text>
          </view>
        </view>
        <view class="goods-point dis-flex">
          <view class="point" v-if="goodsInfo.pointDeductCount">
            {{ goodsInfo.pointDeductCount }}积分抵¥{{
              (goodsInfo.pointDeductPrice * 0.01).toFixed(2)
            }}
          </view>
        </view>
        <view class="cryptocurrency" v-if="goodsInfo.cryptocurrencyDeductCount">
          {{ goodsInfo.cryptocurrencyDeductCount }}收益豆抵¥{{
            (goodsInfo.cryptocurrencyDeductPrice * 0.01).toFixed(2)
          }}
        </view>
        <view
          v-if="goodsInfo.type !== 'food'"
          class="uicon"
          :class="[`add-cart-${goodsInfo.id}`]"
          @click="addToCar()"
          >加入购物车
        </view>
      </view>

      <u-gap height="20"></u-gap>

      <view class="store dis-flex flex-y-center" v-if="goodsInfo && goodsInfo.shop" @click="toShop">
        <view style="border: 1rpx solid #f3f4f6; border-radius: 10rpx">
          <u-image :src="goodsInfo.shop.logo" width="130rpx" height="130rpx"></u-image>
        </view>
        <view class="store-info">
          <view class="top dis-flex flex-y-center flex-y-between">
            <view class="name">{{ goodsInfo.shop.name }}</view>
            <u-icon name="/static/more.png" size="24"></u-icon>
          </view>
          <view class="bot dis-flex flex-y-center flex-y-between">
            <view class="info">
              <text>{{ goodsInfo.shop.detailAddress || '--' }}</text>
              <text class="fenge">|</text>
              <text>评分：{{ goodsInfo.shop.score }}</text>
            </view>
            <view class="bt">进店逛逛</view>
          </view>
        </view>
      </view>

      <view v-if="goodsInfo" class="pickupView">
        <view class="sectionTitle" style="padding: 20rpx; font-weight: 500">商品详情</view>
        <u-parse :html="goodsInfo.description" :tag-style="tagStyle"></u-parse>
      </view>

      <u-gap height="100"></u-gap>

      <view class="footer-fil"></view>
    </view>

    <!-- --start-- 购物车弹窗 -->

    <u-popup
      v-model="showSpecModel"
      backgroundColor="transparent"
      bgColor="transparent"
      mode="center"
      width="500rpx"
      height="auto"
      border-radius="30"
    >
      <view class="tishi-box">
        <view class="content" v-if="goodsInfo">
          <view class="goods-detail">
            <view class="name">{{ goodsInfo.name }}</view>
            <view class="spec">
              <view class="tl">规格：</view>
              <view class="spec-list">
                <view
                  class="spec-item"
                  v-for="(spec, specIndex) in goodsInfo.uniapp.spec_list"
                  :key="specIndex"
                >
                  <text style="margin-right: 20rpx; font-size: 24rpx; color: #666666"
                    >{{ spec.name }}
                  </text>
                  <text
                    v-for="(_spec, _specIndex) in spec.list"
                    :key="_specIndex"
                    class="text"
                    :class="_spec.checked ? 'checked' : ''"
                    @click="checkSpecItem(specIndex, _specIndex)"
                    >{{ _spec.name }}
                  </text>
                </view>
              </view>
            </view>
            <view class="check-item"
              >已选规格:
              <text v-if="checkedSpecItem">{{ checkedSpecItem.sku_name_arr.join(',') }}</text>
              <text v-else>请选择</text>
            </view>
            <view class="const dis-flex flex-y-center">
              <view class="" v-if="checkedSpecItem">
                <text>原价:¥</text>
                <text class="bold">{{ (checkedSpecItem.price * 0.01).toFixed(2) }}</text>
              </view>
              <view
                class="vip-price"
                v-if="checkedSpecItem && goodsInfo.skus[checkedSpecItemIndex]"
              >
                <text>会员价:¥</text>
                <text class="bold"
                  >{{ (goodsInfo.skus[checkedSpecItemIndex].vipPrice * 0.01).toFixed(2) }}
                </text>
              </view>
            </view>
            <view
              class="goods-point dis-flex flex-y-between"
              v-if="
                checkedSpecItem &&
                goodsInfo.skus[checkedSpecItemIndex] &&
                goodsInfo.skus[checkedSpecItemIndex].pointDeductCount
              "
            >
              <view class="point">
                {{ goodsInfo.skus[checkedSpecItemIndex].pointDeductCount }}积分抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductPriceYuan
                }}
              </view>
            </view>
            <view
              class="goods-cryptocurrency dis-flex flex-y-between"
              v-if="
                checkedSpecItem &&
                goodsInfo.skus[checkedSpecItemIndex] &&
                goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount
              "
            >
              <view class="cryptocurrency">
                {{ goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount }}收益豆抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductPriceYuan
                }}
              </view>
            </view>
            <view class="bottom dis-flex flex-y-between">
              <view v-if="checkedSpecItem" @click="addToCartSpec()" class="add-card">确认</view>
              <view v-else @click="addToCartSpec()" class="add-card disabled">确认</view>
              <view @click="colseSpecModle()" class="add-card" style="background-color: gray"
                >取消
              </view>
            </view>
          </view>
        </view>
        <text v-else>没有获取到商品数据</text>
      </view>
    </u-popup>

    <u-popup
      v-model="showCardModel"
      @close="closeCarList"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text>购物车</text>
            <text style="color: #999999; font-size: 24rpx">共{{ carList.length }}样商品</text>
          </view>
          <view
            v-if="carList.length > 0"
            class="clear dis-flex flex-y-center"
            @click="clearCarList()"
          >
            <text>清空购物车</text>
          </view>
          <view
            v-else
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showCardModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <view class="car-list">
          <scroll-view v-if="carList.length > 0" :scroll-y="true" style="height: 550rpx">
            <view class="itemView" v-for="(item, index) in carList" :key="item.id">
              <view class="dis-flex" style="position: relative">
                <u-image width="90" height="90" :src="item.picUrl" border-radius="8"></u-image>
                <view class="itemInfo">
                  <view class="dis-flex flex-x-end">
                    <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                    <view style="font-size: 24rpx; color: #999999; margin-left: 10rpx">
                      <text v-for="(item2, i) in item.sku.properties" :key="i"
                        >{{ item2.valueName + (i === item.sku.properties.length - 1 ? '' : ',') }}
                      </text>
                    </view>
                    <text style="font-size: 24rpx; color: #999999; margin-left: 10rpx"
                      >{{
                        item.stepQuantity && item.unitName
                          ? 'x' + item.stepQuantity + item.unitName
                          : ''
                      }}
                    </text>
                  </view>
                  <view class="dis-flex">
                    <view class="point-rule dis-flex flex-column">
                      <view class="price">
                        <text class="t">原价</text>
                        <text class="n">¥{{ (item.price * 0.01).toFixed(2) }}</text>
                      </view>
                      <view class="price">
                        <text class="t">会员价</text>
                        <text class="n">¥{{ (item.vipPrice * 0.01).toFixed(2) }}</text>
                      </view>
                    </view>
                    <view class="uicon numberBox">
                      <u-number-box
                        v-model="item.count"
                        :index="index"
                        :min="0"
                        :max="item.stock"
                        :disabled-input="false"
                        @change="onCartCont(item)"
                        @minus="onCartCont(item)"
                        @plus="onCartCont(item)"
                      ></u-number-box>
                    </view>
                  </view>
                </view>
                <view v-if="item.invalid" class="cant-check">
                  <text> {{ item.invalidReason }}</text>
                  <view class="flex-1"></view>
                  <text class="del" @click="delCartItem(item)">删除</text>
                </view>
              </view>
            </view>
            <u-gap height="45"></u-gap>
          </scroll-view>
          <view v-else class="nomore">暂无商品</view>
        </view>
      </view>
    </u-popup>

    <view
      v-if="carList.length > 0 && goodsInfo.type !== 'food'"
      class="fixed-wapper"
      style="z-index: 99999"
    >
      <view class="bt-box dis-flex">
        <view class="other dis-flex flex-y-between flex-y-center">
          <view class="count dis-flex flex-y-center" style="flex: 1" @click="showCarList">
            <view class="count-icon">
              <u-icon name="/static/gwc-tm.png" style="margin-top: 10rpx" size="48"></u-icon>
              <u-badge
                type="error"
                size="mini"
                :count="carList.reduce((a, b) => a + b.count, 0)"
                :offset="[0, -20]"
              ></u-badge>
            </view>
            <text v-if="countPrice && !isNaN(countPrice)" class="count-text"
              >¥{{ (countPrice * 0.01).toFixed(2) }}
            </text>
            <!-- <text class="deliver-price">预估配送费3元</text> -->
          </view>
          <view @click="submit" class="submit-btn"> 去下单</view>
        </view>
      </view>
    </view>

    <view
      v-for="item in anims"
      :key="item.key"
      class="add-btn-radio"
      style="position: fixed; transition: transform 0.5s linear"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `translate(${item.x}px, ${item.y}px)`
      }"
    >
      <u-icon size="32" name="/static/add-y.png"></u-icon>
    </view>

    <!-- --end-- 购物车弹窗 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsId: undefined,
      tagStyle: {
        img: 'width: 100%;',
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      comment: {},
      skuMode: 3,
      skuInfo: {},
      firstSku: {},
      // --start-- 购物车弹窗
      goodsInfo: undefined,
      showCardModel: false,
      showSpecModel: false,
      carList: [],
      checkedSpecItem: undefined,
      checkedSpecItemIndex: undefined,
      shecedSpecList: [],
      countPrice: 0,
      anims: []
      // --end-- 购物车弹窗
    }
  },
  computed: {
    navbarHeight() {
      // #ifndef MP-WEIXIN
      return 22
      // #endif
      // #ifdef MP-WEIXIN
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      return this.$u.os() == 'ios' ? 44 : 48
      // #endif
    },
    offsetTop() {
      return -2 * this.navbarHeight + 'px'
    }
  },
  onLoad(options) {
    this.goodsId = options.goodsId || '0'
    this.$u.api
      .getGoodsDetails({
        id: this.goodsId
      })
      .then((res) => {
        if (res.code !== 0) {
          this.$u.toast(res.msg)
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
          return
        }
        this.goodsInfo = res.data
        res.data.sku_list = res.data.uniapp.sku_list
        res.data.sku_list.forEach((item) => {
          item.price = (item.price * 0.01).toFixed(2)
        })
        res.data.spec_list = res.data.uniapp.spec_list
        this.skuInfo = res.data
        this.firstSku = res.data.skus[0]
        this.shopId = this.goodsInfo.shopId
        this.loadCartList()
      })
      .catch((err) => {
        this.$u.toast('出错了：' + err.errMsg)
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
  },
  onShow() {
    this.loadCartList()
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    toShop() {
      if (this.goodsInfo.type == 'food') {
        uni.navigateTo({
          url: '/dine/diancan/diancanv2?shopId=' + this.goodsInfo.shop.id
        })
        return
      }
      if (this.goodsInfo.type === 'mall') {
        uni.navigateTo({
          url: '/shops/store?shopId=' + this.goodsInfo.shop.id
        })
        return
      }
      this.routeTo('/other/merchant-center/merchant-center?id=' + this.goodsInfo.shop.id)
    },
    toCarPage() {
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
    toContact() {
      uni.navigateTo({
        url:
          '/other/customer-chat/customer-chat?userId=' +
          this.goodsInfo.shop.userId +
          '&shopId=' +
          this.goodsInfo.shop.id
      })
    },
    backView() {
      uni.navigateBack()
    },
    // --start-- 购物车弹窗
    onCartCont(item) {
      const app = this
      app.$u.throttle(function () {
        app.$u.api
          .putCartCount({
            id: item.carId || item.id,
            count: item.count
          })
          .then((res) => {
            if (res.code === 0) {
              if (item.count === 0) {
                app.delCartItem(item)
              } else {
                app.loadCartList()
              }
            } else {
              app.$u.toast(res.msg)
            }
          })
      }, 200)
    },
    delCartItem(item) {
      const app = this
      app.$u.get('/app-api/trade/cart/delete?ids=' + item.carId).then((res) => {
        if (res.code === 0) {
          app.loadCartList()
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    clearCarList() {
      this.$u
        .get('/app-api/trade/cart/deleteByShopId', {
          shopId: this.shopId
        })
        .then((res) => {
          if (res.code === 0) {
            this.carList = []
            this.onTotalPrice()
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    loadCartList() {
      const app = this
      app.$u.api
        .getCartList({
          shopId: app.shopId
        })
        .then((res) => {
          if (res.data && res.data.length > 0) {
            app.carList = res.data[0].items.map((it) => ({
              id: it.id,
              carId: it.id,
              count: it.count,
              invalid: it.invalid,
              invalidReason: it.invalidReason,
              sku: it.sku,
              skuId: it.sku.id,
              price: it.sku.price,
              priceYuan: (it.sku.price * 0.01).toFixed(2),
              vipPrice: it.sku.vipPrice,
              vipPriceYuan: (it.sku.vipPrice * 0.01).toFixed(2),
              stock: it.sku.stock,
              name: it.spu.name,
              picUrl: it.spu.picUrl,
              categoryId: it.spu.categoryId,
              unitName: it.spu.unitName,
              priceMode: it.spu.priceMode,
              stepQuantity: it.spu.stepQuantity,
              dishAttribute: it.spu.dishAttribute
            }))
          } else {
            app.carList = []
          }
          app.onTotalPrice()
        })
    },
    onTotalPrice() {
      if (this.carList.length == 0) {
        this.countPrice = 0
        return
      }
      let total = 0
      for (const carItem of this.carList) {
        total += carItem.price * carItem.count
      }
      this.countPrice = total
    },
    checkSpecItem(index, valueIndex) {
      let spec = this.goodsInfo.uniapp.spec_list[index]
      let value = this.goodsInfo.uniapp.spec_list[index].list[valueIndex]
      let newList = []
      spec.list.forEach((_spec, i) => {
        if (valueIndex == i) {
          _spec.checked = true
        } else {
          _spec.checked = false
        }
        newList.push(_spec)
      })
      this.goodsInfo.uniapp.spec_list[index].list = newList
      const existingIndex = this.shecedSpecList.findIndex((item) => item.name === spec.name)
      if (existingIndex !== -1) {
        this.shecedSpecList.splice(existingIndex, 1)
      }
      const newSpec = {
        name: spec.name,
        value: value.id
      }
      this.shecedSpecList.push(newSpec)
      if (this.shecedSpecList.length == this.goodsInfo.uniapp.spec_list.length) {
        this.goodsInfo.uniapp.sku_list.forEach((sku) => {
          sku.isThis = sku.spec_value_ids.every((item) =>
            this.shecedSpecList.some((checked) => checked.value === item)
          )
          if (sku.isThis) {
            this.checkedSpecItem = sku
            let skuIndex = this.goodsInfo.skus.findIndex(
              (sku) => sku.id === this.checkedSpecItem._id
            )
            this.checkedSpecItemIndex = skuIndex
          }
        })
      }
    },
    showCarList() {
      if (this.showCardModel) {
        this.showCardModel = false
      } else {
        this.showCardModel = true
        this.loadCartList()
      }
    },
    showSpecList(item) {
      item.uniapp.spec_list.forEach((spec) => {
        spec.list.forEach((_spec) => {
          _spec.checked = false
        })
      })
      this.showSpecModel = true
      this.goodsInfo = item
    },
    addToCartSpec() {
      if (!this.checkedSpecItem) {
        this.$u.toast('请选择规格')
        return
      }
      let goods = this.$utils.deepClone(this.goodsInfo)
      let skuIndex = this.goodsInfo.skus.findIndex((sku) => sku.id === this.checkedSpecItem._id)
      let sku = goods.skus[skuIndex]
      goods.skus[0] = sku
      this.addToCart(goods)
      this.colseSpecModle()
    },
    colseSpecModle() {
      this.showSpecModel = false
      this.checkedSpecItem = {}
      this.shecedSpecList = []
    },
    addToCar(item = undefined) {
      if (
        !this.$utils.checkLogin(true, '/goods/goods-details/goods-details?goodsId=' + this.goodsId)
      ) {
        return
      }
      if (!item) {
        item = this.goodsInfo
      }
      if (item.skus.length > 1) {
        this.showSpecList(item)
      } else {
        this.addToCart(item)
      }
    },
    addToCart(item) {
      if (this.disable) {
        return
      }
      this.disable = true
      let skuId = item.skus[0].id || item.skus[0]._id
      let carItem = {
        count: 1,
        skuId: skuId,
        priceYuan: item.skus[0].priceYuan,
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        sku: item.skus[0],
        vipPriceYuan: item.skus[0].vipPriceYuan
      }
      this.playAnim(item.id)
      let self = this
      self.$u.api
        .setCartAdd(carItem)
        .then(() => {
          this.disable = false
          self.loadCartList()
        })
        .catch(() => {
          this.disable = false
        })
    },
    closeCarList() {
      this.loadCartList()
    },
    playAnim(itemId) {
      const key = itemId
      this.anims.push({
        key,
        id: itemId,
        left: 0,
        top: 0,
        y: 0,
        x: 0
      })
      // 获取点击元素的节点信息
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(`.add-cart-${itemId}`)
          .boundingClientRect((e) => {
            // 初始化起始位置
            const currentAnim = this.anims.find((citem) => citem.key === key)
            if (currentAnim) {
              currentAnim.top = e.top
              currentAnim.left = e.left
              // 设置目标位置
              currentAnim.y = uni.getSystemInfoSync().windowHeight - e.top - 50
              currentAnim.x = -uni.getSystemInfoSync().windowWidth * 0.78
              setTimeout(() => {
                // 等待动画执行完毕移除元素
                this.anims.splice(
                  this.anims.findIndex((v) => v.key === key),
                  1
                )
              }, 500)
            }
          })
          .exec()
      })
    },
    submit() {
      if (this.carList.length == 0) {
        this.$u.toast('请先添加商品')
        return
      }
      let items = []
      this.carList.forEach((item) => {
        if (!item.invalid) {
          items.push({
            cartId: item.carId || item.id
          })
        }
      })
      if (items.length == 0) {
        this.$u.toast('加购的商品已失效')
        return
      }
      this.$utils.route(
        {
          url: 'goods/order-confirm/order-confirm',
          params: {
            items: JSON.stringify(items)
          }
        },
        true
      )
    }
    // --end-- 购物车弹窗
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.slot-wrap {
  display: flex;
  align-items: center;
  padding-left: 20rpx;

  .cus-back {
    z-index: 99;
    width: 55rpx;
    height: 55rpx;
    line-height: 55rpx;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    text-align: center;

    .uicon {
      font-weight: 100;
    }
  }

  .cus-gwc {
    margin-left: 334rpx;
  }

  .cus-share {
    margin-left: 50rpx;
  }
}

.contentBg {
  width: 100%;
}

.content {
  padding: 20rpx 10rpx;

  .point,
  .vip-price {
    color: #ff6f10;
    margin-left: 15rpx;
  }

  .store {
    height: 180rpx;
    background: #ffffff;
    padding: 25rpx 20rpx;

    .store-info {
      margin-left: 20rpx;
      flex: 1;

      .top {
        margin-bottom: 20rpx;

        .name {
          font-size: 30rpx;
          color: #333333;
        }
      }

      .bot {
        font-size: 24rpx;
        color: #666666;

        .fenge {
          margin: 0 10rpx;
        }

        .bt {
          width: 140rpx;
          height: 50rpx;
          line-height: 50rpx;
          background: #10a28f;
          border-radius: 10rpx;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }

  .goodsView {
    // height: 200rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx 20rpx;

    .goodsTitle {
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .coupon {
      width: 160rpx;
      background: #ebfaf8;
      font-size: 20rpx;
      color: #10a28f;
      padding: 4rpx 10rpx;
      border-radius: 20rpx;
    }

    .goodsSales {
      font-size: 26rpx;
      color: #999999;
      margin-bottom: 16rpx;
    }

    .goodsPrice {
      .goodsPrice-p {
        font-size: 36rpx;
        font-weight: bold;
        color: #fa453c;
      }
    }

    .uicon {
      position: absolute;
      right: 20rpx;
      bottom: 60rpx;
      width: 180rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }

  .pickupView {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
  }

  .comment-box {
    padding: 30rpx 20rpx;
    background-color: #fff;

    .comment-top {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .comment-info {
      margin-bottom: 20rpx;

      .info-left-username {
        font-size: 28rpx;
        color: #333333;
        margin-right: 10rpx;
      }

      .label {
        background: #fa453c;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #ffffff;
        padding: 2rpx 10rpx;
      }
    }

    .comment-content {
      font-size: 26rpx;
      color: #333333;
    }
  }

  .sku-box {
    padding: 0 20rpx;
    background-color: #fff;

    .sku-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e6e6e6;

      .item-t {
        font-size: 30rpx;
        color: #666666;
        width: 100rpx;
      }

      .item-v {
        flex: 1;
        font-size: 30rpx;
        color: #333333;
      }
    }

    .sku-item:last-child {
      border: none;
    }
  }
}

// --start-- 购物车弹窗

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin: 0px 20rpx;
  margin-bottom: 20rpx;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;
  padding-bottom: 20rpx;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: flex-start;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #666666;
  }

  .t {
    font-size: 24rpx;
  }

  .n {
    font-size: 28rpx;
    font-weight: 600;
    color: #fa453c;
  }

  .uicon {
    position: absolute;
    right: 0;
    bottom: 20rpx;
  }

  .uicon-1 {
    width: 96rpx;
    background: #10a28f;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    padding: 2rpx 0;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.car-box {
  .car-tl {
    width: 750rpx;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 0 20rpx;

    .tl-l {
      line-height: 100rpx;
    }

    .clear {
      font-size: 26rpx;
      color: $uni-color-primary;
    }
  }

  .car-list {
    padding: 20rpx;

    .nomore {
      padding-top: 100rpx;
      text-align: center;
      color: #999999;
    }

    .numberBox {
      bottom: -4rpx;
    }
  }
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }
}

.goods-detail {
  .name {
    font-size: 28rpx;
    font-weight: bold;
    color: #666666;
    text-align: center;
  }

  .spec {
    margin-top: 30rpx;

    .tl {
      font-size: 24rpx;
    }

    .spec-list {
      margin-top: 20rpx;

      .spec-item {
        margin-bottom: 20rpx;
      }

      .text {
        height: 50rpx;
        background: #ffffff;
        border-radius: 10rpx;
        border: 1px solid #e6e6e6;
        line-height: 50rpx;
        padding: 10rpx 40rpx;
        margin-right: 20rpx;
      }

      .checked {
        background: #10a28f;
        color: #fff;
        border: 1px solid #10a28f;
      }

      .text:last-child {
        margin-right: 0;
      }
    }
  }

  .check-item {
    font-size: 24rpx;
    color: #999999;
    margin-top: 29rpx;
  }

  .const {
    font-size: 26rpx;
    margin-top: 30rpx;

    .point,
    .vip-price {
      color: #ff6f10;
      margin-left: 15rpx;
    }
  }

  .bottom {
    font-size: 26rpx;
    color: #fa453c;
    margin-top: 30rpx;
    padding: 10rpx 30rpx;

    .add-card {
      width: 200rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }

  .bold {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.goods-point {
  align-items: center;

  .point {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #ff6f10;
  }
}

.cryptocurrency {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #ff6f10;
}

.fixed-wapper {
  width: 100%;
  background-color: #fff;
  left: 0;
  // bottom: 120rpx;

  .bt-box {
    height: 96rpx;
  }

  .other {
    width: 92%;
    background: #333333;
    border-radius: 40rpx;
    margin-left: 4%;
    height: 80rpx;
    margin-top: 8rpx;

    .count {
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      padding-left: 50rpx;

      .count-text {
        margin-left: 40rpx;
      }

      .deliver-price {
        font-size: 24rpx;
        margin-left: 20rpx;
        font-weight: 400;
      }

      .count-icon {
        position: relative;
      }
    }

    .submit-btn {
      width: 200rpx;
      right: 0;
      border-radius: 0rpx 40rpx 40rpx 0rpx;
    }
  }
}

.cant-check {
  position: absolute;
  background-color: rgba(102, 102, 102, 0.5);
  height: 110%;
  font-size: 46rpx;
  font-weight: 600;
  color: #fff;
  left: 0;
  right: 0;
  top: -5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50rpx;

  .del {
    width: 150rpx;
    height: 60rpx;
    background: $uni-color-primary;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 60rpx;
    text-align: center;
  }
}

// --end-- 购物车弹窗
</style>
